<template>
	<view class="component">
		<view class="title" v-if="isShowHeader">
			<view class="label">实景案例<text style="font-size: 26rpx;">({{ dataSource.length || 0 }})</text></view>
			<view class="more" v-if="dataSource.length && dataSource.length > 0">
				<uni-icons type="forward" size="18"></uni-icons>
			</view>
		</view>
		<view class="content">
			<view class="grid">
				<view class="grid-item" v-for="(item, index) of dataSource" :key="index" @click="goDetail(item,index)">
					<view class="tag" v-if="item.is_top == 1">
						<text>置顶</text>
					</view>
					<view class="watch" style="display: flex;align-items: center;">
						<view class="image-w ">
							<image src="../../../static/images/ysmDesignerShop/icon-3.png" mode="widthFix"></image>
						</view>
						<!-- style="font-weight: bold;font-size: 26rpx;" -->
						<text >{{ item.viewed_num }}</text>
					</view>
					<image :src="item.video_img" mode="aspectFill"></image>
				</view>
			</view>

			<StEmpty v-if="isEmpty">暂无实景案例</StEmpty>
		</view>
	</view>
</template>
<script>
	import StEmpty from '@/components/st-empty/st-empty.vue';
	export default {
		components: {
			StEmpty,
		},
		props: {
			isShowHeader: {
				type: Boolean,
				default: true
			},
			dataSource: {
				type: Array,
				default: () => []
			},
			isEmpty: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				/* videoList: [
				  {
				    id: 1,
				    title: '实景案例1',
				    cover: '../../../static/images/ysmDesignerShop/video-2.png',
				    url: 'https://www.baidu.com'
				  },
				] */
			}
		},
		mounted() {

		},
		methods: {
			handlePanView() {
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmVideoMapping?dataSouce=${JSON.stringify(this.dataSource)}`
				});
			},
			goDetail(item, index) {
				console.log('item',item)
				let data1 = this.dataSource.map((aitem) => {
					return {
						id: aitem.id,
						video: aitem.video,
						viewed_num: aitem.viewed_num,
						title: aitem.title,
						video_desc: aitem.video_desc,
						user_id: aitem.user_id
					}
				})
				let data = encodeURIComponent(JSON.stringify(data1));
				let current_data = {
					'id': item.id,
					'video': item.video,
					"viewed_num": item.viewed_num,
					"title": item.title,
					"video_desc": item.video_desc,
					'user_id': item.user_id
				}
				let current = encodeURIComponent(JSON.stringify(current_data));
				// console.log("current:",current)
				let params = "?dataSouce="+data+"&current="+current+"&current_index="+index;
				params = params+"&intro_data="+data+"&intro_current_index="+index+"&intro_current_data="+current;
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmVideoDetail`+params
				});
				
				
				// uni.navigateTo({
				// 	url: `/pagesYSM/ysmDesignerShop/ysmVideoDetail?dataSouce=${data}&current=${current}&current_index=${index}`
				// });
				
		       //  let current = encodeURIComponent(JSON.stringify(current_data));
	 			
				// let intro_data = encodeURIComponent(JSON.stringify(this.intro_data));
				 
				// let intro_current_data = encodeURIComponent(JSON.stringify(this.intro_current));
				 
				// let intro_current_index = this.intro_current_index;
				// let params ="?dataSouce="+data+"&current="+current+"&current_index="+index;
				// params =params+"&intro_data="+intro_data+"&intro_current_index="+intro_current_index+"&intro_current_data="+intro_current_data;
				// uni.navigateTo({
				// 	url: `/pagesYSM/ysmDesignerShop/ysmVideoDetail`+params
				// });
			}
		}
	};
</script>
<style lang='less' scoped>
	.component {
		width: 100%;
		height: 100%;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 30rpx;
			height: 90rpx;

			.label {
				font-size: 32rpx;
				color: #333;
				font-size: 15px;
				line-height: 18px;
			}

			.more {
				font-size: 28rpx;
				color: #999;
			}
		}

		.content {
			padding: 0 0 30rpx 0;

			.grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 6rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.grid-item {
					width: 100%;
					height: 300rpx;
					background-color: #eee;
					position: relative;

					.tag {
						position: absolute;
						top: 12rpx;
						left: 12rpx;
						z-index: 1;

						font-weight: 400;
						font-size: 26rpx;
						line-height: 36rpx;
						color: #FFFFFF;
						padding: 0 10rpx;
						background: #F9CF1F;
						border-radius: 2.18659px;

						color: #000;
					}

					.watch {
						position: absolute;
						bottom: 10rpx;
						left: 16rpx;
						z-index: 1;

						font-weight: 400;
						font-size: 26rpx;
						/* line-height: 36rpx; */
						color: #FFFFFF;

						.image-w {
							/* display: inline-block; */
							width: 38rpx;
							height: 38rpx;
							margin-right: 10rpx;
							display: flex;
							align-items: center;
							/* vertical-align: middle; */
						}

						image {
							width: 100%;
							height: 100%;
							// margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
</style>